<template>
    <div>
        <!-- 打印订单 -->
        <el-dialog title="订单信息批量打印预览" :visible.sync="dialogVisible" width="900px" v-if="orders">

            <el-row>
                <el-col :span="4">
                    <el-button size="medium" type="primary" v-print="'#printContent'">打 印</el-button>
                </el-col>
                <el-col :span="4">
                    <div style="line-height: 36px">
                        展示价格:
                        <el-switch v-model="formInline.showPrice" active-color="#13ce66" inactive-color="#ff4949">
                        </el-switch>

                    </div>
                </el-col>
            </el-row>
            <div id="printContent">
                <div class="printTitle">文乐文（得昱公司）【销售单】</div>
                <div v-for="(orderDatalist, index) in orders" :key="index" style="margin-bottom: 10px;">

                    <printTable :formInline="formInline" :orderDatalist="orderDatalist"></printTable>

                    
                </div>

            </div>

            <div class="description" v-loading="loading">
                <el-divider></el-divider>
            </div>

        </el-dialog>
        <el-dialog v-if="orderDatalist" title="提示" :visible.sync="modal2" width="30%">
            <div class="logistics acea-row row-top">
                <div class="logistics_img"><img src="@/assets/imgs/expressi.jpg"></div>
                <div class="logistics_cent">
                    <span class="mb10">物流公司：{{ orderDatalist.deliveryName }}</span>
                    <span>物流单号：{{ orderDatalist.deliveryId }}</span>
                </div>
            </div>
            <div class="acea-row row-column-around trees-coadd">
                <div class="scollhide">
                    <el-timeline :reverse="reverse">
                        <el-timeline-item v-for="(item, i) in result" :key="i">
                            <p class="time" v-text="item.time"></p>
                            <p class="content" v-text="item.status"></p>
                        </el-timeline-item>
                    </el-timeline>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="modal2 = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { orderDetailsApi, getLogisticsInfoApi } from '@/api/order'
import printTable from './printTable'
export default {
    name: 'OrderDetail',
    components: { printTable },
    props: {
        orderIds: {
            type: String,
            default: 0
        }
    },
    data() {
        return {
             
            reverse: true,
            dialogVisible: false,
            orderDatalist: null,
            loading: false,
            modal2: false,
            result: [],
            orders: [],
            formInline: {
                // 展示价格
                showPrice: true,
                discount: 0,
                title: '文乐文（得昱公司）【销售单】'
            }
        }
    },
    mounted() {
        console.log("组件", this.showPrice);
    },
    methods: {
        showPriceChange() {
            this.formInline.showPrice = true
        },
        openLogistics() {
            this.getOrderData()
            this.modal2 = true;
        },
        // 获取订单物流信息
        getOrderData() {
            // getLogisticsInfoApi({ orderNo: this.orderId }).then(async res => {
            //     this.result = res.list;
            // })
        },
        getDetail(id) {
            this.loading = true
            orderDetailsApi({ orderNos: id }).then(res => {
                this.orders = res
                this.loading = false
            }).catch(() => {
                this.orders = []
                this.loading = false
            })
        }
    }
}
</script>

<style scoped lang="scss">
.printTitle {
    font-size: 20px;
    text-align: center;
    margin: 20px 0;
}

.tips {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px
}

.val {
    padding: 10px;
    line-height: 20px;
    width: 100%;
    box-sizing: border-box;
}




.logistics {
    align-items: center;
    padding: 10px 0px;

    .logistics_img {
        width: 45px;
        height: 45px;
        margin-right: 12px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .logistics_cent {
        span {
            display: block;
            font-size: 12px;
        }
    }
}

.trees-coadd {
    width: 100%;
    height: 400px;
    border-radius: 4px;
    overflow: hidden;

    .scollhide {
        width: 100%;
        height: 100%;
        overflow: auto;
        margin-left: 18px;
        padding: 10px 0 10px 0;
        box-sizing: border-box;

        .content {
            font-size: 12px;
        }

        .time {
            font-size: 12px;
            color: #2d8cf0;
        }

    }
}

.title {
    margin-bottom: 14px;
    color: #303133;
    font-weight: 500;
    font-size: 14px;
}

.description {
    &-term {
        display: table-cell;
        padding-bottom: 5px;
        line-height: 20px;
        width: 50%;
        font-size: 12px;
        color: #606266;
    }

    ::v-deep .el-divider--horizontal {
        margin: 12px 0 !important;
    }
}
</style>